/*
  学习目标：setState()是异步更新数据的

注意：使用该语法时，后面的 setState() 不要依赖于前面的 setState()
1. 当你调用 setState 的时候，React.js 并不会马上修改 state （为什么）
2. 而是把这个对象放到一个更新队列里面
3. 稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。

总结：
1. react中setState是异步更新。
2. 连续调用多个 `setState()` ， 会合并成一个调用。
3. 连续调用多个setStatte()，最终render只执行一次。因此不必担心多次setState带来性能问题

**设计目的：**减少render渲染次数，提高更新DOM效率。
**实现原理：**要更新的数据，放到一个更新队列里面，合并执行。
**合并**：**后面覆盖前面：**最后一个`setState()` 会覆盖前面所有的`setState()`
*/
import React, { Component } from 'react'

export default class App extends Component {
    state = {
        count: 0,
    };

    handleClick = () => {
        this.setState({
            count: this.state.count + 1,
        });
        this.setState({
            count: this.state.count + 1,
        });
        this.setState({
            count: this.state.count + 1,
        });

    };
    render() {
        console.log('只执行一次');
        return (
            <div>
                <h1>数量： {this.state.count}</h1>
                <button onClick={this.handleClick}>点我修改数量</button>
            </div>
        )
    }
}
